﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Script/jquery.js"></script>
    <script src="js/vue.js"></script>
    <style>
        .deleted {
            color: red;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <!--定义一个容器 id="app"-->
    <div id="app">
        博客园：{{ name }} <!--获取变量 name Mustache语法 两个花括号 -->

        <p>------------------------（v-text和v-html使用）------------------------</p>
        <p class="name" v-text="author"></p>
        <a href="#" v-html="authorHtml"></a>
    </div>

    <div id="test">
        <p>------------------------（v-show）------------------------</p>
        <ul>
            <li class="nav-item" v-show="isShow">
                <a href="/rss.xml">CSDN</a>
            </li>
        </ul>
    </div>
    <p>------------------------（v-if和v-else-if和v-else）------------------------</p>
    <div id="test1">
        <div v-if="list.length >3 ">
            MOST
        </div>
        <div v-else-if="list.length > 1 ">
            MORE
        </div>
        <div v-else>
            ALL
        </div>
    </div>
    <div id="test2">
        <p>------------------------（v-for）------------------------</p>
        <input @keydown.enter="addArticle" type="text" class="edit" v-model="task.name" placeholder="按回车添加文章">
        <ul class="post-list non-style-list">

            <li v-for='item in list' class="post-list-item">
                <a :href="'https://www.cnblogs.com/laozhang-is-phi/p/'+ item.id +'.html'">{{item.name}}</a>
                <span class="post-list-date">({{item.date}})</span>
            </li>
        </ul>
    </div>
    <div id="test3">
        <p>------------------------（v-on事件）------------------------</p>
        <div v-on:click="msg('我爱你')"> 点击 </div>

    </div>
    <!--`
    @click='show($event)'    事件对象
    @click.stop  阻止冒泡事件
    @contextmenu.prevent 右键点击事件，并阻止右键默认行为
    @keyup.13  回车
    @keyup.enter 回车
    //上下左右
    @keyup/keydown.left
    @keyup/keydown.right
    @keyup/keydown.up
    @keyup/keydown.down
    `-->

    <div id="test4">
        <p>------------------------（computed事件和监视器）------------------------</p>
        <p>message:{{reversedMessage }}</p>
        <input type="text" v-model="task.name" placeholder="搜索文章" />
        <ul class="post-list non-style-list">
            <li v-for='item in listSearch' class="post-list-item" :class="{deleted:item.deleted}">
                <span class="post-list-date">{{item.name}}({{item.date}})</span>
            </li>
        </ul>
        <h2 :class="[hrClass,testClass]">
            <span>多样式class绑定</span>
        </h2>

    </div>

    <div id="test5">
        <p>------------------------（vue状态）------------------------</p>
        <span>beforeCreate状态：{{status}}</span>
    </div>
    <div id="test6">
        <footer-vue></footer-vue>
    </div>

    <script src="js/template.js"></script>
    <script>
        var myVue = new Vue({
            el: '#app',
            data: {
                name: '一米阳光',
                author: '我的博客',
                authorHtml: '<strong>我的博客</strong>'


            }
        });

        var test = new Vue({
            el: '#test',
            data: {
                isShow: false
            }
        })

        var test1 = new Vue({
            el: '#test1',
            data: {
                list: [
                    { name: '1111111111111' },
                    { name: '1111111111111' },
                    { name: '1111111111111' },
                    { name: '1111111111111' }
                ]
            }
        })

        var test2 = new Vue({
            el: '#test2',//容器
            data: {
                list: [
                    //假数据
                    { name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日" },
                    { name: "Vue前篇：JS对象&字面量&this", id: 9580807, date: "2018年9月4日" },
                    { name: " VUE 计划书 & 我的前后端开发简史", id: 9577805, date: "2018年9月3日" },
                    { name: " DTOs 对象映射使用，项目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日" },
                    { name: " 三种跨域方式比较，DTOs(数据传输对象)初探", id: 4200, date: "2018年8月31日" },
                    { name: "VUE 计划书 & 我的前后端开发简史", id: 3200, date: "2018年9月2日" },
                    { name: "VUE 实战预告", id: 3200, date: "2018年9月12日" }
                ],
                task: {
                    name: '',
                    id: 0,
                    date: '',
                    finished: false,//未完成
                    deleted: false//未删除
                }
            },
            methods: {
                //添加事件
                addArticle: function () {
                    //将文章存入list数组，注意 this指向！
                    //将数据反转
                    this.list = this.list.reverse();
                    this.list.push(this.task);
                    this.list = this.list.reverse();

                    //存入list[]后，重置task
                    this.task = {
                        name: '',//内容为空
                        id: 1000,
                        date: " Just Now ",
                        finished: false,//未完成
                        deleted: false//未删除
                    }
                }
            }
        });

        var test3 = new Vue({
            el: '#test3',
            data: {
                task: {
                    name: '',
                    id: 0,
                    date: '',
                    finished: false,//未完成
                    deleted: false//未删除
                },
                list: [//假数据
                    { name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日", finished: false, deleted: false },
                    { name: " Vue前篇：JS对象&字面量&this", id: 9580807, date: "2018年9月4日", finished: false, deleted: false },
                    { name: " VUE 计划书 & 我的前后端开发简史", id: 9577805, date: "2018年9月3日", finished: false, deleted: false },
                    { name: " DTOs 对象映射使用，项目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日", finished: false, deleted: false },
                    { name: " 三种跨域方式比较，DTOs(数据传输对象)初探", id: 4200, date: "2018年8月31日", finished: false, deleted: false },
                    { name: " VUE 计划书 & 我的前后端开发简史", id: 3200, date: "2018年9月2日", finished: false, deleted: false },
                    { name: " VUE 实战预告", id: 3200, date: "2018年9月12日", finished: false, deleted: false }
                ]
            },
            methods: {
                msg(obj) {
                    console.log(obj);
                },
                //添加事件
                addArticle: function () {
                    //将文章存入list数组，注意 this指向！
                    //将数据反转
                    this.list = this.list.reverse();
                    this.list.push(this.task);
                    this.list = this.list.reverse();

                    //存入list[]后，重置task
                    this.task = {
                        name: '',//内容为空
                        id: 1000,
                        date: " Just Now ",
                        finished: false,//未完成
                        deleted: false//未删除
                    }
                }
            }
        })

        var test4 = new Vue({
            el: '#test4',
            data: {
                message: 'Hello',
                hrClass: 'hr',
                testClass: 'test',
                task: {
                    name: '',
                    id: 0,
                    date: '',
                    finished: false,//未完成
                    deleted: false//未删除
                },
                list: [
                    //假数据
                    { name: " Vue前篇：ES6初体验 & 模块化编程", id: 9585766, date: "2018年9月5日", finished: false, deleted: true },
                    //我们在这里定义一个删除的true
                    { name: "Vue前篇：JS对象&字面量&this", id: 9580807, date: "2018年9月4日", finished: false, deleted: false },
                    { name: " VUE 计划书 & 我的前后端开发简史", id: 9577805, date: "2018年9月3日", finished: false, deleted: false },
                    { name: " DTOs 对象映射使用，项目部署Windows+Linux完整版", id: 3800, date: "2018年9月1日", finished: false, deleted: false },
                    { name: " 三种跨域方式比较，DTOs(数据传输对象)初探", id: 4200, date: "2018年8月31日", finished: false, deleted: false },
                    { name: "VUE 计划书 & 我的前后端开发简史", id: 3200, date: "2018年9月2日", finished: false, deleted: false },
                    { name: "VUE 实战预告", id: 3200, date: "2018年9月12日", finished: false, deleted: false }],
            },
            watch: {
                task: {
                    handler: (newValue, oldValue) => {
                        console.log('age的newValue值为：' + newValue.age + '，旧值为:' + oldValue.age);
                        //原来的旧值已经看不见了，只能看到新的值
                    },
                    deep: true //深度监视，当对象中的属性发生变化时会被监控
                },
                deep: true //表示监视对象的属性变化
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // 注意 ！`this` 指向 vm 实例,把数据转换位置
                    return this.message.split('').reverse().join('');
                },
                listSearch: function () {
                    let that = this;
                    return this.list.filter(function (item) {
                        return item.name.indexOf(that.$data.task.name) >= 0;
                    })
                }
            }
        })

        var test5 = new Vue({
            el: '#test5',
            data: {
                status: 0
            },
            beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            created: function () {
                console.group('create 创建后状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            beforeMount: function () {
                console.group('beforeMount 挂载前状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            mounted: function () {
                console.group('mounted 挂载后状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            beforeUpdate: function () {
                console.group('beforeUpdate 更新前状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            updated: function () {
                console.group('updated 更新后状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
            destroyed: function () {
                console.group('destroyed 销毁后状态===============》');
                console.log('%c%s', 'color:red', 'el  :' + this.$el);
                console.log(this.$el);
                console.log('%c%s', 'color:red', 'data  :' + this.$data);
                console.log('%c%s', 'color:red', 'status  :' + this.status);
            },
        })

        new Vue({
            el: '#test6'
        })

    </script>
</body>
</html>